<template>
  <div>
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
      <template v-if="authData.state === 2" #buts>
        <a-button type="primary" @click="router.back()">
          <template #default>取消</template>
        </a-button>
        <a-button type="primary" @click="carryout">
          <template #default>执行</template>
        </a-button>
      </template>
      <template v-if="authData.state === 3" #footer>
        <a-space>
          <a-button type="outline" status="danger" @click="cancel"
            >取消</a-button
          >
          <a-button type="primary" status="success" @click="TaskRelease">
            <template #icon><icon-storage /></template>
            提交认证</a-button
          >
        </a-space>
      </template>
      <div style="padding-bottom: 50px">
        <h1 class="title">供应商现场验厂认证流程 </h1>
        <div v-if="authData.state === 4 || authData.state === 5">
          <div class="title-item">
            <span style="padding-left: 40px">样品认证结果</span>
          </div>
          <div style="margin-top: 10px; margin-left: 100px">
            <a-space :size="30" direction="vertical" fill>
              <div>
                是否通过认证：
                <a-radio-group
                  size="large"
                  :default-value="authData.state === 4 ? 1 : 2"
                  disabled
                >
                  <a-radio
                    :value="1"
                    :style="{
                      marginRight: '20px',
                    }"
                  >
                    <template #radio="{ checked }">
                      <div
                        :style="{
                          display: 'flex',
                          width: '135px',
                        }"
                        :class="checked ? 'checked-radio' : 'unchecked-radio'"
                      >
                        <div
                          :style="{
                            width: '35px',
                            textAlign: 'center',
                          }"
                          :class="
                            checked
                              ? 'radio-icon-box-checked'
                              : 'radio-icon-box-unchecked'
                          "
                        >
                          <icon-check-circle
                            :class="
                              checked
                                ? 'radio-icon-checked'
                                : 'radio-icon-unchecked'
                            "
                            class="radio-icon"
                            size="20px"
                          />
                        </div>
                        <div
                          :style="{
                            width: '100px',
                            textAlign: 'center',
                          }"
                        >
                          通过
                        </div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="2">
                    <template #radio="{ checked }">
                      <div
                        :style="{
                          display: 'flex',
                          width: '135px',
                        }"
                        :class="
                          checked ? 'checked-radio-no' : 'unchecked-radio'
                        "
                      >
                        <div
                          :style="{
                            width: '35px',
                            textAlign: 'center',
                          }"
                          :class="
                            checked
                              ? 'radio-icon-box-checked-no'
                              : 'radio-icon-box-unchecked'
                          "
                        >
                          <icon-check-circle
                            :class="
                              checked
                                ? 'radio-icon-checked-no'
                                : 'radio-icon-unchecked'
                            "
                            class="radio-icon"
                            size="20px"
                          />
                        </div>
                        <div
                          :style="{
                            width: '100px',
                            textAlign: 'center',
                          }"
                        >
                          不通过
                        </div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </div>
              <div>
                <a-space :size="20" direction="vertical" fill>
                  <div> 认证意见： </div>
                  <a-textarea
                    v-model="authData.authPoint"
                    placeholder="请输入意见"
                    allow-clear
                  />
                </a-space>
              </div>
            </a-space>
          </div>
        </div>

        <div
          v-if="authData.state === 4 || authData.state === 5"
          style="margin-top: 30px"
        >
          <div class="title-item">
            <span style="padding-left: 40px">现场验厂报告</span>
          </div>
          <div style="width: 100%; margin: 50px 100px">
            <a-space :size="30" direction="vertical" fill>
              <div>
                验厂描述：
                <div style="margin-top: 10px">
                  <a-textarea v-model="authData.authPoint" allow-clear />
                </div>
              </div>

              <div style="width: 100%">
                <a-space :size="20" direction="vertical" fill>
                  <div>验厂报告：</div>
                  <div style="width: 100%">
                    <UploadFile
                      ref="FileRef"
                      v-model:file-list="ReportfileData"
                      :limit="0"
                      :isShowRemove="authData.isOver === 0"
                      :disabled="authData.isOver === 1"
                    ></UploadFile>
                  </div>
                </a-space>
              </div>
              <div> </div>
            </a-space>
          </div>
        </div>

        <div class="title-item" style="margin-top: 30px">
          <span style="padding-left: 40px">认证任务</span>
        </div>
        <div class="info-item">
          <div style="width: 100%; display: flex; margin: 20px 50px">
            <a-space>
              <div
                style="
                  width: 4px;
                  height: 15px;
                  background-color: rgba(61, 126, 255, 1);
                  border: none;
                  border-radius: 2px;
                "
              >
              </div>
              <div>基本信息</div>
            </a-space>
          </div>
          <div style="width: 100%; display: flex; justify-content: center"
            ><a-form style="width: 60%" :model="formlist" auto-label-width>
              <a-row :gutter="24" justify="space-between">
                <a-col :span="11">
                  <a-form-item field="posts.post2" label="认证单号："
                    ><a-input v-model="authData.number" disabled
                  /></a-form-item>
                </a-col>
                <a-col :span="11">
                  <a-form-item field="posts.post2" label="供应商编号："
                    ><a-input
                      v-model="formlist.list.number"
                      placeholder=""
                      allow-clear
                      disabled
                  /></a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24" justify="space-between">
                <a-col :span="11">
                  <a-form-item field="posts.post2" label="供应商名称："
                    ><a-input
                      v-model="formlist.list.name"
                      placeholder=""
                      allow-clear
                      disabled
                  /></a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24" justify="space-between">
                <a-col :span="11">
                  <a-form-item field="posts.post2" label="任务下达时间：">
                    <a-date-picker
                      v-model="authData.taskReleasTime"
                      style="width: 200px"
                      disabled
                  /></a-form-item>
                </a-col>
                <a-col :span="11">
                  <a-form-item field="posts.post2" label="下单人：">
                    <a-input
                      placeholder=""
                      allow-clear
                      v-model="Order.name"
                      disabled
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <!-- 执行信息 -->
          <div v-if="authData.state != 1">
            <div style="width: 100%; display: flex; margin: 20px 50px">
              <a-space>
                <div
                  style="
                    width: 4px;
                    height: 15px;
                    background-color: rgba(61, 116, 255, 1);
                    border: none;
                    border-radius: 2px;
                  "
                >
                </div>
                <div>执行信息</div>
              </a-space>
            </div>
            <div style="width: 100%; display: flex; justify-content: center"
              ><a-form style="width: 60%" :model="authData" auto-label-width>
                <a-row :gutter="24" justify="space-between">
                  <a-col :span="11">
                    <a-form-item field="posts.post2" label="验厂负责人："
                      ><a-input
                        v-model="authData.headManName"
                        placeholder="Please enter something"
                        allow-clear
                        disabled
                    /></a-form-item>
                  </a-col>
                  <a-col :span="11">
                    <a-form-item field="posts.post2" label="任务开始时间">
                      <a-date-picker
                        :popup-visible="false"
                        placeholder="点击执行后自动生成"
                        v-model="authData.beginTime"
                        disabled
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="24" justify="space-between">
                  <a-col :span="11">
                    <a-form-item field="posts.post2" label="任务结束时间："
                      ><a-date-picker
                        v-model="authData.endTime"
                        :disabled="authData.state > 2"
                    /></a-form-item>
                  </a-col>
                  <a-col :span="11">
                    <a-form-item field="posts.post2" label="供应商状态："
                      ><div
                        :class="
                          authData.state === 2
                            ? 'Qualified'
                            : authData.state === 3
                            ? 'Examining'
                            : authData.state === 4
                            ? 'Pass'
                            : 'NoPass'
                        "
                      >
                        <span>
                          {{
                            authData.state === 2
                              ? '待执行'
                              : authData.state === 3
                              ? '执行中'
                              : authData.state === 4
                              ? '通过'
                              : '不通过'
                          }}
                        </span>
                      </div></a-form-item
                    >
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>
          <div style="width: 100%; display: flex; margin: 20px 50px">
            <a-space>
              <div
                style="
                  width: 4px;
                  height: 15px;
                  background-color: rgba(61, 126, 255, 1);
                  border: none;
                  border-radius: 2px;
                "
              >
              </div>
              <div>任务执行人</div>
            </a-space>
          </div>
          <div style="width: 70%; margin-left: 20%">
            <a-space :size="30" direction="vertical" fill>
              <div v-if="authData.state === 1">
                <span>验厂负责人：</span>
                <a-select
                  v-model="authData.headManName"
                  :style="{ width: '320px' }"
                  placeholder="Please select ..."
                >
                  <a-option
                    v-for="item in Personne"
                    :key="item.id"
                    :value="item.id"
                    >{{ item.name }}</a-option
                  >
                </a-select>
              </div>
              <TableTurn
                :tableData="getData"
                :args="args"
                ref="tableTurnRef"
                :is-show-pagination="false"
              >
                <a-table-column
                  data-index="userName"
                  align="center"
                  title="姓名"
                >
                </a-table-column>
                <a-table-column
                  data-index="responsibility"
                  align="center"
                  title="负责"
                >
                </a-table-column>
                <a-table-column
                  data-index="description"
                  align="center"
                  title="职责"
                >
                </a-table-column>
              </TableTurn>
            </a-space>
            <div>
              <a-button
                v-if="authData.state === 1"
                type="text"
                @click="AddMember"
              >
                <template #icon>
                  <icon-plus />
                </template>
                添加
              </a-button>
            </div>
          </div>

          <div style="width: 100%; margin: 50px 50px">
            <a-space direction="vertical" fill style="width: 95%">
              <div> 注意事项： </div>
              <div>
                <a-textarea
                  v-model="authData.description"
                  disabled
                  placeholder="Please enter something"
                  allow-clear
                />
              </div>
            </a-space>
          </div>

          <!-- 所需附件：
        <div v-if="authData.state != 1" style="width: 100%; margin: 20px 50px">
          <a-space :size="20" direction="vertical" fill>
            <div>验厂所需附件：</div>
            <div v-for="(element, index) in fileData" :key="index">
              <a-space direction="vertical" fill>
                <div>
                  <a-input
                    :style="{ width: '320px' }"
                    v-model="element.name"
                    allow-clear
                  />
                  <div class="uploadFile" v-if="uploadFileShow">{{
                    element.name
                  }}</div>
                </div>
                <div style="display: flex">
                  <div>
                    <icon-plus />
                    <a-typography-text type="primary">
                      添加附加类型
                    </a-typography-text></div
                  >
                  <div>
                    <span style="margin: 2px 50px"
                      >支持pdf、doc、docx、wps文件格式，大小不超过20MB</span
                    >
                  </div>
                </div>
              </a-space>
            </div>
          </a-space>
        </div> -->

          <div style="width: 100%; margin: 20px 50px">
            <a-space :size="20" direction="vertical" fill>
              <div>所需附件：</div>
              <UploadFile
                ref="FileRef"
                v-model:file-list="fileAll"
                :limit="0"
                :isShowRemove="route.query.state !== 'add'"
                :disabled="route.query.state !== 'add'"
              ></UploadFile>
              <!-- <div v-for="(element, index) in fileAll" :key="index">
              <a-space direction="vertical" fill>
                <div>
                  <div class="uploadFile">
                    <span>{{ element.name }} </span>
                    <a
                      target="_blank"
                      :href="element.fileAddr"
                      :download="element.name"
                      >下载</a
                    ></div
                  >
                </div>
              </a-space>
            </div>
            <div style="display: flex">
              <div>
                <span>支持pdf、doc、docx、wps文件格式，大小不超过20MB</span>
              </div>
            </div> -->
            </a-space>
          </div>

          <div v-if="authData.state === 3">
            <div class="title-item" style="margin-top: 30px">
              <span style="padding-left: 40px">现场验厂报告</span>
            </div>
            <div style="width: 100%; margin: 50px 50px">
              <a-space :size="30" direction="vertical" fill>
                <div>
                  验厂描述：
                  <div>
                    <a-textarea v-model="authData.description" allow-clear />
                  </div>
                </div>

                <div style="width: 100%">
                  <a-space :size="20" direction="vertical" fill>
                    <div>验厂报告：</div>
                    <UploadFile
                      ref="FileRef"
                      v-model:file-list="ReportfileData"
                      :limit="0"
                      :isShowRemove="authData.isOver === 0"
                      :disabled="authData.isOver === 1"
                    ></UploadFile>
                    <!-- <div style="display: flex" v-if="authData.isOver === 0">
                      <div style="cursor: pointer" @click="addAduitDetails">
                        <icon-plus style="color: rgb(var(--primary-6))" />
                        <a-typography-text type="primary">
                          添加附加类型
                        </a-typography-text></div
                      >
                      <div>
                        <span style="margin: 2px 50px"
                          >支持pdf、doc、docx、wps文件格式，大小不超过20MB</span
                        >
                      </div>
                    </div> -->
                  </a-space>
                </div>
                <div>
                  <a-button
                    :disabled="authData.isOver === 1"
                    type="primary"
                    @click="submitAuthProduct"
                    >验厂报告结果</a-button
                  >
                </div>
              </a-space>
            </div>
          </div>

          <div v-if="authData.state === 3">
            <div v-if="authData.isOver === 1">
              <div class="title-item">
                <span style="padding-left: 40px">现场验厂认证结果</span>
              </div>
              <div style="width: 95%; margin: 20px 40px">
                <a-space :size="40" direction="vertical" fill>
                  <div
                    ><span>是否通过认证：</span>
                    <a-radio-group size="large" @change="authStateData">
                      <a-radio
                        :value="4"
                        :style="{
                          marginRight: '20px',
                        }"
                      >
                        <template #radio="{ checked }">
                          <div
                            :style="{
                              display: 'flex',
                              width: '135px',
                            }"
                            :class="
                              checked ? 'checked-radio' : 'unchecked-radio'
                            "
                          >
                            <div
                              :style="{
                                width: '35px',
                                textAlign: 'center',
                              }"
                              :class="
                                checked
                                  ? 'radio-icon-box-checked'
                                  : 'radio-icon-box-unchecked'
                              "
                            >
                              <icon-check-circle
                                :class="
                                  checked
                                    ? 'radio-icon-checked'
                                    : 'radio-icon-unchecked'
                                "
                                class="radio-icon"
                                size="20px"
                              />
                            </div>
                            <div
                              :style="{
                                width: '100px',
                                textAlign: 'center',
                              }"
                            >
                              合格
                            </div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="5">
                        <template #radio="{ checked }">
                          <div
                            :style="{
                              display: 'flex',
                              width: '135px',
                            }"
                            :class="
                              checked ? 'checked-radio-no' : 'unchecked-radio'
                            "
                          >
                            <div
                              :style="{
                                width: '35px',
                                textAlign: 'center',
                              }"
                              :class="
                                checked
                                  ? 'radio-icon-box-checked-no'
                                  : 'radio-icon-box-unchecked'
                              "
                            >
                              <icon-check-circle
                                :class="
                                  checked
                                    ? 'radio-icon-checked-no'
                                    : 'radio-icon-unchecked'
                                "
                                class="radio-icon"
                                size="20px"
                              />
                            </div>
                            <div
                              :style="{
                                width: '100px',
                                textAlign: 'center',
                              }"
                            >
                              不合格
                            </div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group></div
                  >
                  <div>
                    <a-space direction="vertical" fill>
                      <span>认证意见：</span>
                      <a-textarea
                        v-model="authData.authPoint"
                        placeholder=""
                        allow-clear
                      />
                    </a-space>
                  </div>
                </a-space>
              </div>
            </div>
          </div>
        </div>
      </div>
    </pageHeader>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { getSupplierauth } from '@/api/buy-management/supplier-management/base-setting/index';
  import {
    postSupplierMans,
    getSupplierProduct,
    delSupplierMans,
    putSupplierAuth,
  } from '@/api/buy-management/supplier-management/supplier-certification/index';
  import { GetSupplierPrimaryDetail } from '@/api/buy-management/supplier-management/supplier-primary-list/index';
  import { cloneDeep } from 'lodash';
  import { GetPersonnelinformation } from '@/api/home/System settings/personal-information/index';
  import dayjs from 'dayjs';
  import { openChoiceFile } from '@/utils/file';
  import axios from 'axios';
  import { getToken } from '@/utils/auth';
  import { FileUpload } from '@/utils/upload';
  import { number } from 'echarts';
  import { Message } from '@arco-design/web-vue';
  // import addMember from './add-member/index.vue';

  const route = useRoute();
  const router = useRouter();
  const tableTurnRef = ref();
  const title: string = '供应商现场验厂认证';
  const ModelVisible = ref(false);
  const uploadFileShow = ref(true);
  const breadCrumb: string[] = [
    '采购管理',
    '供应商管理',
    '基础设置',
    '供应商认证项目设置',
    '供应商现场验厂认证',
  ];

  const SupplierId = Number(route.query.gys);
  const authId = Number(route.query.auth);
  const ShowResults = ref(false);
  const formlist = reactive({ list: { number: '', name: '' } });
  let authData: any = ref({ file: [], Reportfile: [] });
  const Order = ref(JSON.parse(sessionStorage.getItem('loginInfo') as any));
  const getdetailsdata = async () => {
    const res = await GetSupplierPrimaryDetail({
      id: SupplierId,
    });
    const msg = await getSupplierProduct({ id: authId });
    authData.value.Reportfile = [];
    formlist.list = res;
    Object.assign(authData.value, msg);
    authData.value.file.forEach((ele: any) => {
      if (ele.fileType === 2 && ele.supplierFileType === 2) {
        authData.value.Reportfile.push({
          ...ele,
          sourceAddr: ele.addr,
          fileUrl: ele.fileAddr,
          fileName: ele.name,
        });
      }
    });
    authData.value.file = authData.value.file.filter(
      (ele) => ele.fileType === 2 && ele.supplierFileType !== 2
    );
    if (authData.value.authReport.length > 0) {
      ShowResults.value = true;
    }
  };
  getdetailsdata();

  // 获取人员信息
  const Personne = ref();
  const Personnelinformation = async () => {
    const res = await GetPersonnelinformation({ page: 0, size: 9999 });
    Personne.value = res.content.data;
  };
  Personnelinformation();

  // 点击添加成员
  const AddMember = () => {
    ModelVisible.value = true;
  };

  // 获取成员表格数据
  const fileData = ref();
  const getData = async () => {
    try {
      const res = await getSupplierProduct({
        id: JSON.parse(route.query.auth),
      });
      return Promise.resolve(res.members);
    } catch (err: unknown) {
      console.log(err);
    }
  };
  // 点击确认添加成员
  const addCocMemder = async (formData) => {
    await postSupplierMans({
      supplierAuthId: authData.value.id,
      userId: formData.userId,
      responsibility: formData.responsibility,
      description: formData.description,
    });
    tableTurnRef.value.loadData();
  };
  // 取消
  const cancel = () => {
    router.go(-1);
  };
  // 点击删除成员
  const delMans = async (id) => {
    await delSupplierMans({ id });
    tableTurnRef.value.loadData();
  };

  const addAduitDetails = () => {
    authData.value.file.push({ fileType: 2, supplierFileType: 2 });
  };

  // 验厂报告结果
  const submitAuthProduct = async () => {
    authData.value.state = 3;
    authData.value.isOver = 1;
    authData.value.file = authData.value.file.concat(authData.value.Reportfile);
    await putSupplierAuth(authData.value);
    getdetailsdata();
  };
  // watchEffect(() => {
  //   if (authData.value.authReport.length > 0) {

  //     isAddReport.value = authData.value.authReport?.every((i) => {
  //       return i.productReport.every((ele) => ele.testResult === 1);
  //     });
  //   }
  // });

  const StateData = ref();
  const authStateData = (key: any) => {
    StateData.value = key;
  };

  // 任务下达
  const TaskRelease = async () => {
    if (!StateData.value) {
      Message.error('请选择审核结果');
      return;
    }
    authData.value.file = authData.value.file.concat(authData.value.Reportfile);
    authData.value.endTime = new Date(authData.value.endTime).toJSON();
    authData.value.state = StateData.value;
    await putSupplierAuth(authData.value);
    router.go(-1);
  };

  // 执行
  const carryout = async () => {
    authData.value.state = 3;
    authData.value.beginTime = new Date(authData.value.beginTime).toJSON();
    authData.value.endTime = new Date(authData.value.endTime).toJSON();
    await putSupplierAuth(authData.value);
    router.go(-1);
  };

  let fileAll = computed({
    get() {
      const newarr = [];
      authData.value.file.forEach((ele) => {
        if (ele.fileType === 2 && ele.supplierFileType === 1) {
          newarr.push({
            sourceAddr: ele.addr,
            fileUrl: ele.fileAddr,
            fileName: ele.name,
          });
        }
      });
      return newarr.length > 0 ? newarr : [];
    },
    set(val: any[]) {
      authData.value.file =
        val?.map((element) => {
          return {
            addr: element.sourceAddr,
            name: element.fileName,
            fileAddr: element.fileUrl,
            fileType: 2,
            supplierFileType: 1,
          };
        }) || [];
    },
  });

  let ReportfileData = computed({
    get() {
      const newArr = authData.value.Reportfile.map((element) => {
        return {
          sourceAddr: element.addr,
          fileUrl: element.fileAddr,
          fileName: element.name,
        };
      });
      return newArr.length > 0 ? newArr : [];
    },
    set(val: any[]) {
      authData.value.Reportfile =
        val?.map((element) => {
          return {
            addr: element.sourceAddr,
            name: element.fileName,
            fileAddr: element.fileUrl,
            fileType: 2,
            supplierFileType: 2,
          };
        }) || [];
    },
  });
</script>

<style scoped lang="less">
  .basic-item {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(242, 243, 245, 0.852);
  }

  .title {
    margin-left: 45%;
  }

  .title-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
  }

  .info-item {
    width: 100%;
  }
  .state-item {
    width: 95px;
    height: 40px;
    background: inherit;
    background-color: rgba(228, 228, 228, 1);
    border: none;
    border-radius: 100px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: aliceblue;
  }

  .report-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
  }

  .unchecked-radio {
    background-color: #fff;
    color: #dcdfe6;
    border: 1px solid #dcdfe6;
    font-weight: 700;
    font-size: 13px;
  }
  .checked-radio {
    background-color: rgb(49, 194, 124);
    color: #fff;
    border: 1px solid rgb(49, 194, 124);
    font-weight: 700;
    font-size: 13px;
  }

  .checked-radio-no {
    background-color: rgb(255, 0, 0);
    color: #fff;
    border: 1px solid rgb(255, 0, 0);
    font-weight: 700;
    font-size: 13px;
  }
  .radio-icon-box-checked {
    border: 1px solid rgb(49, 194, 124);
    background-color: #fff;
  }
  .radio-icon-box-checked-no {
    border: 1px solid rgb(255, 0, 0);
    background-color: #fff;
  }
  .radio-icon-box-unchecked {
    border: 1px solid rgba(220, 223, 230, 1);
  }
  .radio-icon-checked {
    color: rgb(49, 194, 124);
  }

  .radio-icon-checked-no {
    color: rgb(255, 0, 0);
  }

  .radio-icon-unchecked {
  }

  .WaitSubmitted {
    // 待下达
    width: 95px;
    height: 40px;
    border-radius: 100px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c9cdd4;
    color: rgb(255, 255, 255);
    border: none;
  }
  .Examining {
    // 执行中
    width: 95px;
    height: 40px;
    border-radius: 100px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #165dff;
    border: none;
  }
  .Pass {
    // 已通过
    width: 95px;
    height: 40px;
    border-radius: 100px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(49, 194, 124);
    color: #ffffff;
    border: none;
  }
  .NoPass {
    //不通过
    width: 95px;
    height: 40px;
    border-radius: 100px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f53f3f;
    border: none;
  }
  .Qualified {
    // 待执行
    width: 95px;
    height: 40px;
    border-radius: 100px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 247, 232);
    border: none;
    color: #ff9a2e;
  }

  .uploadFile {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    box-sizing: border-box;
    width: 40%;
    padding: 8px 10px 8px 12px;
    overflow: hidden;
    font-size: 14px;
    background-color: var(--color-fill-1);
    border-radius: var(--border-radius-small);
    transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
    margin-top: 10px;
  }
</style>
